<template>
  <svg v-if="isSvg" class="iconfont icon--svg" :class="className" aria-hidden="true">
    <use :xlink:href="svgHref" />
  </svg>
  <i v-else class="iconfont" :class="className" @click="$emit('click', $event)"></i>
</template>

<script>
import '@/assets/iconfont/iconfont.js';

export default {
  name: 'icon',

  props: {
    name: {
      type: String,
      default: '',
    },
    svg: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    isSvg() {
      return this.svg;
    },

    svgHref() {
      return `#icon-${this.name}`;
    },

    className() {
      return `icon-${this.name}`;
    },
  },
};
</script>


<style lang="scss" scoped>
@import '~@/assets/iconfont/iconfont.css';
.icon--svg {
  width: 1em;
  height: 1em;
}
</style>